<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<!--<head th:include="include :: header"></head>-->
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="/build/css/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/easyui.css">
<link rel="stylesheet" type="text/css" href="/css/my-style.css">
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style>
    body {
        height: auto;
        font-family: "Microsoft YaHei";
    }

    button {
        font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
    }

    .treeSearchInput {
        margin-left: 26%;
    }

    .layui-input {
        float: left;
        height: 38px;
        line-height: 1.3;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
        display: block;
        width: 40%;
        padding-left: 10px;
    }
</style>
<body class="hold-transition box box-main" style="margin-right: 20%">
<input id="treeId" name="treeId" type="hidden" th:value="${dept.getId().toString()}"/>
<input id="treeName" name="treeName" type="hidden" th:value="${dept.deptName}"/>
<div class="wrapper">

    <div style="margin-left: 25%;margin-top: 5%;line-height: 38px;" id="search">
        <label for="keyword" style="float: left; ">关键字：</label>
        <input type="text" class="layui-input" id="keyword" maxlength="50" style="margin-left: 5%">
        <span style="line-height: 38px;margin-left: 5%"><button class="layui-btn layui-btn-sm"
                                                                id="btn"
                                                                onclick="searchNode()"> 搜索</button></span>
    </div>
    <div style="height: 200px;margin-left: 20%;margin-top: 2%;overflow-y: scroll;">
        <div id="tree" class="ztree treeselect" ></div>
    </div>

</div>
<div class="layui-layer-btn" style="margin-left: 55%;margin-top: 8%;">
    <a class="layui-btn layui-btn-sm" th:onclick="'javascript:loadObj()'"><i
            class="fa fa-check"></i> 确定</a>
</div>
<!--<div th:include="include::footer"></div>-->
<script src="/js/jquery.min.js"></script>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:inline="javascript">
    // 树结构初始化加载
    var setting = {
        view: {selectedMulti: false}, data: {key: {title: "title"}, simpleData: {enable: true}},
        callback: {
            onClick: function (event, treeId, treeNode) {
                var treeId = treeNode.id;
                var treeName = treeNode.name;
                $("#treeId").val(treeId);
                $("#treeName").val(treeName);
            }
        }
    }, tree, loadTree = function () {
        $.get("/system/dept/treeData", function (data) {
            var treeName = $("#treeName").val();
            tree = $.fn.zTree.init($("#tree"), setting, data);
            // 展开第一级节点
            var nodes = tree.getNodesByParam("level", 0);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
            // 展开第二级节点
            nodes = tree.getNodesByParam("level", 1);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
            // 展开第二级节点
            nodes = tree.getNodesByParam("level", 2);
            for (var i = 0; i < nodes.length; i++) {
                tree.expandNode(nodes[i], true, false, false);
                selectCheckNode(treeName, nodes[i]);
            }
        }, null, null, "正在加载，请稍后...");
    };

    $(function () {
        loadTree();
    });

    function selectCheckNode(treeName, node) {
        if (treeName == node.name) {
            tree.selectNode(node, true);
        }
    }

    $('#btnExpand').click(function () {
        tree.expandAll(true);
    });
    $('#btnCollapse').click(function () {
        tree.expandAll(false);
    });

    function loadObj() {
        var treeId = $("#treeId").val();
        var treeName = $("#treeName").val();
        parent.$("#treeId").val(treeId);
        parent.$("#treeName").val(treeName);
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    var lastValue = "", nodeList = [], key = $("#keyword");
    key.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNode);
    key.bind("keydown", function (e) {
        if (e.which == 13) {
            searchNode();
        }
    });

    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }

    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
        searchNode(e);
    }

    function searchNode() {
        var value = $.trim(key.get(0).value);
        var keyType = "name";
        if (lastValue === value) {
            return;
        }
        lastValue = value;
        var nodes = tree.getNodes();
        if (value == "") {
            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);
        nodeList = tree.getNodesByParamFuzzy(keyType, value);
        updateNodes(nodeList);
    }

    function hideAllNode(nodes) {
        var tree = $.fn.zTree.getZTreeObj("tree");
        nodes = tree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            tree.hideNode(nodes[i]);
        }
    }

    function showAllNode(nodes) {
        nodes = tree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                tree.expandNode(nodes[i], false, false, false, false);
            } else {
                tree.expandNode(nodes[i], true, true, false, false);
            }
            tree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }

    function updateNodes(nodeList) {
        tree.showNodes(nodeList);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    function showChildren(treeNode) {
        if (treeNode.isParent) {
            for (var idx in treeNode.children) {
                var node = treeNode.children[idx];
                tree.showNode(node);
                showChildren(node);
            }
        }
    }

    function showParent(treeNode) {
        var parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            tree.showNode(parentNode);
            tree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }

    function search($this) {
        $('#search').slideToggle(200);
        $('#btnShow').toggle();
        $('#btnHide').toggle();
        $('#keyword').focus();
    }
</script>
</body>
</html>
